<template>
   <div class="SchoolInformation-task-table">
    <el-table :data="State.SchoolDetailsArr" style="width:100%" height="90%" ref="table">
      <el-table-column label="序号" type="index" width="150"></el-table-column>
      <el-table-column prop="name" label="学校" min-width="40%"></el-table-column>
      <el-table-column prop="count" label="报名人数" min-width="30%"></el-table-column>
      <el-table-column fixed="right" prop="option" label="操作" min-width="10%" width="150">
        <template #default="scope">
          <el-button @click="StudentDetails(scope.row)" class="SchoolInformation-task-table-detailed">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs,watch,ref,nextTick } from "vue";
import { postData} from "@/assets/js/pubilcs.js";  
export default defineComponent({
  name: "SchoolInformation",
  components: {
   
  },
  props:{
     SchoolDetailsArr: {
      type: Array,
      default: () => [],
    },
  },

  setup(props, ctx) {
    let State = reactive(
        {
            SchoolDetailsArr:[],
            StudentDetailsArr:[],
        }
    )
    //用ref方式获取table的数据
    let table = ref(null)
    nextTick(() => {
        table.value.doLayout()
    })
    State.SchoolDetailsArr= props.SchoolDetailsArr
    //监听父组件传过来的报名信息详情的值
    watch(() => props.SchoolDetailsArr, (val, old) =>
      {
        State.SchoolDetailsArr = val
        console.log('报名信息详情的值',State.SchoolDetailsArr);
      },
      {deep: true}
    )
    //获取学生信息
    function StudentDetails(row){
      postData("/api/SkillsContest/GetAllByEntryOrganizationId",JSON.stringify({SCEntryOrganizationId:row.schoolId,SCInformationId:row.scInformationId}),sessionStorage.getItem("token")).
      then(function (res) {
        if(res.result.success){
          //学生详情数据
          State.StudentDetailsArr = res.result.result
          console.log('学生详情数据',State.StudentDetailsArr);
          //将子组件的数据传递给父组件
          ctx.emit("GetStudentDetailsArr",State.StudentDetailsArr)
          //传递需要显示的模版
          ctx.emit("GetMatchPanelState",3)
          //传递显示的标题
          ctx.emit("GetTitle","学生详情")
        }
      })
      .catch((error) => {
        console.log(error)
      });
    }
    return {
        State,
        StudentDetails,
        table,
    };
  },
});
</script>
<style lang="less">
.SchoolInformation-task-table{
  position: absolute;
  width: 96%;
  height: 100%;
  left: 25px;
  top: 50px;
}
.SchoolInformation-task-table .el-table{
  width: 96%;
  height: 90%;
  overflow: auto;
}
.SchoolInformation-task-table .el-table .cell{
  text-align:center
}

.SchoolInformation-task-table-detailed:hover{
  background: linear-gradient(90deg, #807de1, #218cde);;
  color: #ffff;
}
</style>
